<template>
  <view class="question-container">
    <hi-transition name="slide-left" show>
      <view
        class="question-item"
        :key="questionIndex"
        v-for="(question, questionIndex) of questionList"
      >
        <view class="question-wrap">
          <!-- 题干 -->
          <view class="title u-m-b-32">
            <text class="topic"
              >[{{ question.type }}题-
              <text>第 {{ question.index }} 题]</text></text
            >
            <div class="u-m-t-8">
              <v-parser :html="question.content" /></div
          ></view>
          <div v-if="question.type === '单选'">
            <question-single
              :is-show-answer="question.isShowAnswer"
              :question="question"
              @select="onSelectQuestion"
            ></question-single>
          </div>
          <div v-else-if="question.type === '判断'">
            <question-judge
              :is-show-answer="question.isShowAnswer"
              :question="question"
              @select="onSelectQuestion"
            ></question-judge>
          </div>
          <div v-else-if="question.type === '多选'">
            <question-multiple
              :is-show-answer="question.isShowAnswer"
              :question="question"
              @select="onSelectQuestion"
            ></question-multiple>
          </div>
          <div v-else>
            <question-content :question="question"></question-content>
          </div>
        </view>

        <!-- 收藏操作 -->
        <div class="action-wrap">
          <div
            v-if="isShowClose"
            class="action-item close"
            @click="$emit('close', questionIndex)"
          >
            <image
              mode="widthFix"
              src="/static/image/question/close.png "
            ></image>
          </div>
          <div
            v-if="isShowAnswer"
            class="action-item analyse"
            :class="question.isShowAnswer ? 'action-item__active' : ''"
            @click="$emit('answer', questionIndex)"
          >
            <image
              mode="widthFix"
              :src="
                question.isShowAnswer
                  ? '/static/image/question/analyse_active.png'
                  : '/static/image/question/analyse.png'
              "
            ></image>
          </div>
          <div
            class="action-item collect"
            :class="question.isCollected ? 'action-item__active' : ''"
            @click="$emit('collect', questionIndex)"
          >
            <u-icon
              name="star-fill"
              :class="
                question.isCollected
                  ? 'u-type-primary-light'
                  : 'u-type-primary-dark'
              "
              class="u-font-2xl"
            ></u-icon>
          </div>
        </div>

        <!-- 底部 -->
        <view class="footer" v-if="isShowFooter">
          <text
            >{{ question.paperCreateAt | parseTime("{y}-{m}-{d} {h}:{i}") }}
          </text>
          <text class="dot"> · </text>
          <text> {{ question.paperTitle }}</text>
        </view>
      </view>
    </hi-transition>
  </view>
</template>
<script>
import QuestionSingle from "./QuestionSingle.vue"
import QuestionMultiple from "./QuestionMultiple.vue"
import QuestionJudge from "./QuestionJudge.vue"
import QuestionContent from "./QuestionContent.vue"
import VParser from "@/components/jyf-parser/jyf-parser"

export default {
  components: {
    QuestionSingle,
    QuestionMultiple,
    QuestionJudge,
    QuestionContent,
    VParser,
  },
  props: {
    questionList: {
      type: Array,
      default: () => {
        return []
      },
    },
    canSelect: {
      type: Boolean,
      default: false,
    },
    isShowAnswer: {
      type: Boolean,
      default: false,
    },
    isShowFooter: {
      type: Boolean,
      default: false,
    },
    isShowClose: {
      type: Boolean,
      default: false,
    },
  },

  computed: {},
  data() {
    return {}
  },

  methods: {
    onSelectQuestion({ id, type, selectIndex }) {
      if (type === "multiple") {
        this.$emit("select", { id, type, selectIndex: selectIndex })
      } else {
        this.$emit("select", { id, type, selectIndex: +selectIndex + 1 })
      }
    },
  },
}
</script>

<style lang="scss" scope>
.question-container {
  margin-bottom: 120rpx;
  padding: 32rpx 18rpx 120rpx 18rpx;
  .question-item {
    margin-top: 32rpx;
    border-bottom: 3rpx solid #bdc3c7;
    padding-bottom: 40rpx;
    .question-wrap {
      margin: 0 16rpx;
      .title {
        font-size: 36rpx;
        .topic {
          margin-right: 8rpx;

          font-size: 36rpx;
          font-weight: 600;
        }
      }
    }
    .action-wrap {
      display: flex;

      padding: 0 48rpx;

      align-items: center;
      justify-content: flex-end;
      .action-item {
        display: flex;

        border-radius: 50%;
        width: 100rpx;
        height: 100rpx;

        background: #ecf0f3;

        box-shadow: 7px 7px 14px #cccccf, -7px -7px 14px #fff;

        transition: background 0.2s ease-in-out;

        align-items: center;
        justify-content: center;
      }

      .close {
        margin-right: 32rpx;
        image {
          width: 56rpx;
        }
        &.action-item__active {
          background-image: linear-gradient(
            120deg,
            rgba(255, 152, 0, 1) 0%,
            rgba(233, 30, 99, 1) 100%
          );

          box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25),
            inset -2px -2px 5px rgba(255, 255, 255, 0.25);
        }
      }

      .analyse {
        image {
          width: 56rpx;
        }
        &.action-item__active {
          background-image: linear-gradient(
            151deg,
            rgba(242, 209, 7, 1) 0%,
            rgba(255, 138, 138, 1) 100%
          );

          box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25),
            inset -2px -2px 5px rgba(255, 255, 255, 0.25);
        }
      }
      .collect {
        margin-left: 32rpx;
        image {
          width: 70rpx;
        }
        &.action-item__active {
          background-image: linear-gradient(151deg, #c1d2ed 0%, #3768c7 100%);

          box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25),
            inset -2px -2px 5px rgba(255, 255, 255, 0.25);
        }
      }
    }
  }

  .answer {
    .label {
      display: inline-block;
      display: flex;

      width: 100%;

      font-size: 24rpx;

      color: #bdc3c7;

      align-items: center;
      justify-content: space-between;
    }
    .content {
      font-size: 32rpx;
      word-wrap: break-word;
      word-break: break-all;
      .tip {
        margin-right: 10rpx;

        font-size: 24rpx;
        white-space: nowrap;
      }
    }
  }

  .footer {
    display: flex;

    margin-top: 48rpx;
    padding-left: 12rpx;

    font-size: 24rpx;
    word-wrap: break-word;
    word-break: break-all;

    color: #7f8c8d;

    align-items: center;
    justify-content: flex-start;
    .dot {
      margin: 0 8rpx;
    }
  }
}
</style>
